<!doctype html>
<html lang="zh-cmn-Hans">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"/>
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/css/mdui.min.css"
      integrity="sha384-cLRrMq39HOZdvE0j6yBojO4+1PrHfB7a9l5qLcmRm/fiWXYY+CndJPmyu5FV/9Tw"
      crossorigin="anonymous"
    />
    <title></title>
    <style>
      
      body {
        margin:0;
        padding:0;
        height:100%;
        font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, sans-serif;
      }
      .footer {
        position:absolute;
        bottom:0;
        width:100%;
        height:70px;
      }
    </style>
  </head>
  <body id="body" class="mdui-appbar-with-toolbar mdui-theme-accent-blue mdui-theme-layout-auto ">
    
    <div id="app" style="height: 50px;" class="mdui-appbar mdui-appbar-fixed mdui-color-white mdui-shadow-1">
        <div style="height: 50px;" class="mdui-toolbar">
          <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">keyboard_arrow_left</i></a>
          <a href="javascript:;" class="mdui-typo-title mdui-center"><strong>协同工作</strong></a>
          <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">more_horiz</i></a>
        </div>
    </div>

    <div id="chat" class="mdui-container-fluid mdui-m-t-1 mdui-p-r-0" style="overflow: scroll;">
      <div class="mdui-toolbar" style="height: 40px;">
        <img style="height: 40px; width: 40px;" class="mdui-img-rounded mdui-m-x-0" src="holder.js/40x40"/>
        <div class="mdui-typo-body-2 mdui-m-x-0 mdui-m-l-1 mdui-p-t-1">This is a message?</div>
        <textarea style="">This is a message?This is a message?This is a message?This is a message?This is a message?This is a message?</textarea>
        <div class="mdui-toolbar-spacer"></div>
      </div>
      <div class="mdui-toolbar" style="height: 40px;">
        <div class="mdui-toolbar-spacer"></div>
        <div class="mdui-typo-body-2 mdui-m-x-0 mdui-m-r-1 mdui-p-t-1 mdui-float-right">This is a message?</div>
        <img style="height: 40px; width: 40px;" class="mdui-img-rounded mdui-m-x-0 mdui-float-right" src="holder.js/40x40"/>
      </div>
    </div>

    <div class="footer mdui-color-white">
      <div class="mdui-typo"><hr/></div>
      <div class="mdui-toolbar" style="height: 50px;">
        <div class="mdui-textfield" style="width: 100%;">
          <textarea class="mdui-textfield-input" placeholder="Description" rows="1"></textarea>
        </div>
        <button class="mdui-btn mdui-color-theme-accent mdui-btn-dense mdui-ripple mdui-float-right mdui-m-r-2 mdui-m-t-1">Send</button>
      </div>
    </div>

    <script src="https://cdn.bootcss.com/holder/2.9.4/holder.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/js/mdui.min.js"
      integrity="sha384-gCMZcshYKOGRX9r6wbDrvF+TcCCswSHFucUzUPwka+Gr+uHgjlYvkABr95TCOz3A"
      crossorigin="anonymous"
    ></script>
    <script>
      function DeviceIden() {
          var sUserAgent = navigator.userAgent.toLowerCase();
          var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
          var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
          var bIsMidp = sUserAgent.match(/midp/i) == "midp";
          var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
          var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
          var bIsAndroid = sUserAgent.match(/android/i) == "android";
          var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
          var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
          if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
              return "phone";
          } else {
              return "computer";
          }
      }

      if (DeviceIden() == "computer"){
          document.getElementById("body").classList.remove("mdui-appbar-with-toolbar")
          document.getElementById("app").classList.add("mdui-hidden")
      }

      function Bottom() {
        var chat = document.getElementById('chat');
        if(chat.scrollHeight > chat.clientHeight) {
          chat.scrollTop = chat.scrollHeight;
        }
      }

      function AutoChatHei(){
          var winHeight=0;
          if (window.innerHeight){
              winHeight = window.innerHeight;
          }
          else if ((document.body) && (document.body.clientHeight)){
              winHeight = document.body.clientHeight;
          }
          if (document.documentElement && document.documentElement.clientHeight){
              winHeight = document.documentElement.clientHeight;
          }
          winHeight = winHeight - 70;
          if (DeviceIden() == "phone"){
            winHeight = winHeight - 55;
          }
          document.getElementById("chat").style.height = winHeight +"px";
      }
      AutoChatHei();
      window.onresize = AutoChatHei;
      Bottom();
    </script>
  </body>
</html>